<template>
  <img class="header_image" src="../../assets/user.png" />
  <div class="register">
    <p><input type="text" data-test='username' v-model="data.username" placeholder="请输入手机号"></p>
    <p><input type="text" data-test='password' v-model="data.password" placeholder="请输入密码"></p>
    <p><input type="text" data-test='confirm-password' v-model="data.confirmPassword" placeholder="确认密码"></p>
    <p>
      <button data-test='register' @click="handleLogin">注册</button>
    </p>
    <p>
      <a class="redirect_login" @click="redirectLogin">已有账号去登陆</a>
    </p>
  </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { reactive } from 'vue'
import userService from '@/api/service/userService'
import { checkEmptyField } from '@/views/register/registerVerify'
import { checkPasswordNotConsistency } from '@/views/register/checkPasswordNotConsistency'

export default {
  name: 'Register',
  setup () {
    const data = reactive({
      username: '',
      password: '',
      confirmPassword: ''
    })
    const router = useRouter()
    const handleLogin = () => {
      if (checkEmptyField(data)) {
        alert('字段不能为空')
        return
      }
      if (checkPasswordNotConsistency(data)) {
        alert('密码不一致')
        return
      }
      userService.register({
        username: data.username,
        password: data.password
      }).then(() => {
        router.push({ path: '/login' })
      })
    }
    return {
      handleLogin,
      data
    }
  }
}

</script>
<style lang="scss">
.header_image {
  position: absolute;
  top: 1.2rem;
  left: 1.55rem;
  width: .66rem;
  height: .66rem;
}

.register {
  margin-top: 2.26rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;

  input {
    background: #F9F9F9;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 0.06rem;
    width: 2.95rem;
    height: .48rem;
    margin-bottom: .16rem;
    font-size: 0.16rem;
    color: rgba(0, 0, 0, 0.50);
    letter-spacing: 0;
    line-height: 0.24rem;
    text-indent: 0.1rem;
  }

  button {
    margin-top: .2rem;
    background: #0091FF;
    box-shadow: 0 .04rem .08rem 0 rgba(0, 145, 255, 0.32);
    border-radius: 0.04rem;
    width: 2.95rem;
    height: .48rem;
    border: none;
    font-size: 0.16rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: 0.24rem;
  }

  .redirect_login {
    display: block;
    margin-top: .16rem;
    font-size: 0.14rem;
    color: rgba(0, 0, 0, 0.50);
    letter-spacing: 0;
  }
}
</style>
